<template>
  <PageLayout class="form-container">
    <div class="form-box">
      <!-- <div class="form-title">{{ route.query.id ? "编辑" : "新增" }}门店</div> -->
      <a-form
        :model="formState"
        :rules="rules"
        ref="formRef"
        layout="Vertical"
        :labelCol="{ style: { width: '120px' } }"
      >
        <div class="card-list">
          <a-card>
            <a-descriptions title="门店信息"> </a-descriptions>
            <div class="d-flex">
              <a-form-item class="flex-1" label="门店名称" name="name" required>
                <a-input
                  v-model:value="formState.name"
                  placeholder="请输入门店名称"
                  :maxlength="50"
                />
              </a-form-item>
              <a-form-item
                class="flex-1"
                label="营业执照编号"
                name="businessLicenseNo"
                required
              >
                <a-input
                  v-model:value="formState.businessLicenseNo"
                  placeholder="请输入营业执照编号"
                  :maxlength="50"
                />
              </a-form-item>
            </div>
            <div class="d-flex">
              <a-form-item
                class="flex-1"
                label="门店编号"
                name="shopNo"
                required
              >
                <a-input
                  v-model:value="formState.shopNo"
                  placeholder="请输入门店编号"
                  :maxlength="50"
                />
              </a-form-item>
              <a-form-item
                class="flex-1"
                label="签约时间"
                name="signTime"
                required
              >
                <a-date-picker
                  valueFormat="YYYY-MM-DD"
                  v-model:value="formState.signTime"
                  placeholder="选择签约时间"
                  style="width: 100%"
                />
              </a-form-item>
            </div>
            <a-form-item label="门店地址" name="areaCode" required>
              <a-form-item-rest name="username">
                <div class="d-flex">
                  <a-cascader
                    v-model:value="formState.areaCode"
                    placeholder="请选择"
                    :options="areaJson"
                    style="margin-right: 24px"
                    @change="changeArea"
                  />
                  <a-input
                    v-model:value="formState.address"
                    placeholder="请输入详细地址"
                    :maxlength="50"
                  />
                </div>
              </a-form-item-rest>
            </a-form-item>
            <!-- <a-form-item label="总信用分" name="totalAmount" required>
              <a-input
                  v-model:value="formState.totalAmount"
                  placeholder="请输入总信用分"
                  :maxlength="50"
                />
            </a-form-item> -->
          </a-card>
          <a-card>
            <a-descriptions title="管理信息"> </a-descriptions>
            <a-form-item label="店铺客户专员" name="customerSpecialistId">
              <a-select
                v-model:value="formState.customerSpecialistId"
                placeholder="请选择店铺客户专员"
                :options="userOptions"
              />
            </a-form-item>
            <!-- <a-form-item label="店铺代理商编号" name="agentId">
              <a-select
                v-model:value="formState.agentId"
                placeholder="请选择店铺代理商编号"
                :options="deptOptions"
              />
            </a-form-item> -->
          </a-card>
        </div>
        <a-button
          type="primary"
          class="float-right mt-24"
          style="width: 100px"
          @click="save"
          >确定</a-button
        >
      </a-form>
    </div>
  </PageLayout>
</template>

<script setup>
import {
  postShopAdd,
  postShopUpdate,
  postShopDetail,
  postUserList,
} from "@/api/common";
import { areaJson } from "@/utils/area";
import { useStoreCommonEnum } from "@/store";
import { message } from "ant-design-vue";
import { onMounted } from "vue";
const storeCommonEnum = useStoreCommonEnum();

const route = useRoute();
const router = useRouter();
const formRef = ref(null);

const formState = reactive({
  id: "",
  name: "",
  businessLicenseNo: "",
  shopNo: "",
  signTime: "",
  areaCode: undefined,
  totalAmount: '',
  address: "",
  customerSpecialistId: undefined,
  agentId: "",
  province: "",
  city: "",
  area: "",
  provinceId: "",
  cityId: "",
  areaId: "",
});
const userOptions = ref([]);
const deptOptions = ref([]);

onMounted(async () => {
  postUserList().then((res) => {
    userOptions.value = res.data.map((item) => {
      return {
        ...item,
        label: item.nickname,
        value: item.id,
      };
    });
  });
  if (route.query.id) {
    postShopDetail({ id: route.query.id }).then((res) => {
      for (let key in formState) {
        formState[key] = res.data[key];
      }
      const valObj = {
        0: "provinceId",
        1: "cityId",
        2: "areaId",
      };
      let arr = [];
      for (let key in valObj) {
        if (res.data[valObj[key]]) {
          arr.push(res.data[valObj[key]]);
        }
      }
      formState.areaCode = arr;
    });
  }
});

const rules = {
  nickname: [{ required: true, message: "请输入门店名字", trigger: "blur" }],
  businessLicenseNo: [
    { required: true, message: "请输入营业执照编号", trigger: "blur" },
  ],
  shopNo: [{ required: true, message: "请输入门店编号", trigger: "blur" }],
  signTime: [{ required: true, message: "请选择签约时间" }],
  areaCode: [
    {
      required: true,
      validator: (_rule, value) => {
        if (formState.areaCode == "" || formState.address == "") {
          return Promise.reject("地址信息不能为空");
        } else {
          return Promise.resolve();
        }
      },
    },
  ],
  customerSpecialistId: [{ required: true, message: "请选择店铺客户专员" }],
  // agentId: [{ required: true, message: "请选择店铺代理商编号" }],
};

const changeArea = (value, selectedOptions) => {
  const labelObj = {
    0: "province",
    1: "city",
    2: "area",
  };
  const valObj = {
    0: "provinceId",
    1: "cityId",
    2: "areaId",
  };
  selectedOptions.map((item, index) => {
    formState[labelObj[index]] = item.label;
    formState[valObj[index]] = item.value;
  });
  console.log("formState", formState);
  console.log("value, selectedOptions", value, selectedOptions);
};
const save = () => {
  formRef.value.validate().then(() => {
    const requestUrl = formState.id ? postShopUpdate : postShopAdd;
    requestUrl({ ...formState }).then(() => {
      message.success(formState.id ? "编辑成功" : "新增成功");
      router.go(-1);
    });
  });
};
</script>

<style lang="less" scoped>
.card-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.btn-box {
  margin-top: 24px;
  margin-left: 130px;
  :deep(.ant-btn) {
    margin-right: 16px;
  }
}
</style>
